import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button, Tabs } from 'antd'
import { queryWaitReceiveCaseList, queryReceiveCaseList } from '~/api/accept-property-api'
import { getUserInfo } from '~/mock/user/userinfo'
import { useNavigate, useLocation } from 'react-router-dom'

import ReceiveList from './container/receive-list'
import ReceivedList from './container/received-list'
import NotifyModal from '~/components/notify-modal'

const { TabPane } = Tabs

const notifyList = [
  '对于扣押、扣留、调取、登记（需要由公安机关保管的）、先行登记保存（需要由公安机关保管的）、追缴（需要发还当事人，但在24小时以内无法发还的）或尚未作出处理决定，需要委托其他单位保管的涉案财物应【制作《涉案财物交接凭证》】',
  '对于登记（由被侵害人或者善意取得第三人持有的）、登记保存、查封、封存、冻结、先行登记保存等不在执法办案单位保管的涉案财物等，应【制作《涉案财物告知凭证》】',
  '接受、扣押、调取的需要附卷的书证材料、视听资料等，应【制作《涉案财物告知凭证》】',
  '因法定情形，涉案财物应立即移交其他行政单位管辖处理的涉案财物，应【制作《涉案财物告知凭证》】',
  '已在24小时以内作出处理决定的涉案财物或控制下交付的涉案钱款，应在作出处理决定后【制作《涉案财物告知凭证》】',
  '对于扣押、调取、查封、冻结等无法在24小时以内获取或执行的涉案财物，应在信息采集后的24小时以内上传附件说明'
]

interface QueryListProps {
  caseName?: string
  caseNo?: string
}

const Home: FC = () => {
  const [form] = Form.useForm()
  const { resetFields } = form
  const [receiveList, setReciveList] = useState([])
  const [receivedList, setRecivedList] = useState([])
  const [notifyVisible, setNotifyVisible] = useState(false)
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()
  const { activeKey = '1' } = state || { activeKey: '1' }

  const handleGetReceiveList = async (values?: QueryListProps) => {
    const userInfo = getUserInfo()
    const { caseName, caseNo } = values || {}
    const { data } = await queryWaitReceiveCaseList({
      ...userInfo,
      caseName,
      caseNo
    })
    setReciveList(data)
  }

  const handleGetReceivedList = async (values?: QueryListProps) => {
    const userInfo = getUserInfo()
    const { caseName, caseNo } = values || {}
    const { data } = await queryReceiveCaseList({
      ...userInfo,
      caseName,
      caseNo
    })
    setRecivedList(data)
  }

  const onFinish = (val: any) => {
    handleGetReceiveList(val)
    handleGetReceivedList(val)
  }

  const showNotification = () => {
    setNotifyVisible(true)
  }

  const handleInitData = () => {
    handleGetReceiveList()
    handleGetReceivedList()
  }

  useEffect(() => {
    handleInitData()
    showNotification()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="caseNo" label="案件编号：" initialValue={null}>
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="案件名称：" initialValue={null}>
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
            <Button
              onClick={() => {
                resetFields()
                handleInitData()
              }}
              style={{ padding: 0, marginLeft: 8 }}
              type="link"
            >
              清空选项
            </Button>
          </Form.Item>
        </Form>
      </header>
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
        >
          <TabPane tab={<span>待接收列表({receiveList.length})</span>} key="1">
            <ReceiveList receiveList={receiveList} />
          </TabPane>
          <TabPane tab={<span>已接收列表({receivedList.length})</span>} key="2">
            <ReceivedList receivedList={receivedList} />
          </TabPane>
        </Tabs>
      </main>
      <NotifyModal
        visible={notifyVisible}
        list={notifyList}
        onCancel={() => {
          setNotifyVisible(false)
        }}
      />
    </div>
  )
}

export default Home
